<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>WebSocket</title>
</head>
<script th:src="@{/js/jquery-1.4.2.min.js}"></script>
<body>
<div style="width: 800px;height: 100%; margin: 0px auto;">
    <div>
        <input type="text" placeholder="请输入消息" id="text">
        <input type="text" placeholder="发送给谁(userId)" id="userId">
        <button onclick="send()">发送</button>
        <input type="file" id="f" onchange="chooseFile()">
    </div>
    <span style="color: coral; font-size: 22px;">建立客户端连接传入userId：http://127.0.0.1:8082/?userId=1</span><br/><br/>
    <div id="message">
    </div>
</div>
</body>

<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8082/chat/" + GetQueryString("userId"));
    }else{
        alert('连接失败!!')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("webSocket 连接成功~");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，
    // 防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        //如果接收是图片的话，可再此按消息类型显示
        //解析json
        // var json = JSON.parse(ev.data);
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    function GetQueryString(id) {
        var reg = new RegExp("(^|&)"+ id +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }

    function send(){
        var message = document.getElementById('text').value;
        var userId = document.getElementById('userId').value;
        //如果发送图片可再此定义类型
        $.ajax({
            type: 'post',
            url: '/msg/send',
            data: {
                message: message,
                id: userId
            },
            dataType: 'json',
            success: function (result) {

            }
        });
    }

    //发送图片消息
    // function chooseFile() {
    //     var files = document.querySelector("#f").files
    //     if(files.length>0){
    //         var fileReader = new FileReader();
    //         fileReader.readAsDataURL(files[0])
    //         fileReader.onload=function (e) {
    //             var s = JSON.stringify({code:2,msg:e.target.result});
    //             send(s)
    //         }
    //     }
    // }

    </script>
</html>